<template>
<div class="msg-out">
  <div class="msg-box">
    <!-- <img src="~assets/img/common/login.png" alt="" class="login-btn" @click="toLogin"> -->
    <textarea v-model.trim="noteData" placeholder="来说两句吧.." id="msgbox" cols="120" rows="4" class="msg-text"></textarea>
  </div>
  <div class="msg-box-bottom">
    <div class="msg-expression"></div>
    <div class="msg-send">
      <span v-show="showWarn">评论内容为空！</span>
      <button @click="sendMsg">畅言一下</button>
    </div>
  </div>
</div>
</template>

<script>
import {request} from 'network/request'
export default {
  name: 'messagebox',
  data () {
    return {
      noteData: null,
      showWarn: false
    }
  },
  methods: {
    sendMsg() {
      if (this.noteData === null || this.noteData === '') {
        this.showWarn = true
        return
      }else {
        console.log(this.noteData);
        this.showWarn = false
      }

      //检查用户是否已经登录
      request({
        url:'/blog/checkIsLogin',
        method:'POST',
      }).then(response => {
        if(response.code === 500){
          this.$message.error(response.message);
          this.$store.commit('showLoginBox')
          return;
        }
        else{
          request({
            url:'/message/addMessage',
            method:'POST',
            data: {
              message: this.noteData
            }
          }).then(response => {
            if(response.code === 20000){
              this.$message.success('留言成功')
            }else{
              this.$message.error('留言失败')
            }
          }).catch(error => {
            this.$message.error('请求增加留言失败')
          })
        }
      }).catch(error => {
        this.$message.error('请登录')
      })
    },
    toLogin() {
      this.$store.commit('showLoginBox')
    }
  }
}
</script>

<style>
.msg-out{
  margin: 50px 2px 2px 2px;
  padding: 3px;
  width: 100%;
}
.msg-box{
  border: 1px solid red;
  border-radius: 10px;
  width: 100%;
  padding: 20px 15px 5px;
  position: relative;
}
.msg-text{
  /* border: 1px solid red; */
  border: none;
  resize: none;
  outline: none;
  width: 100%;
  background-color: rgba(255, 255, 255, 0);
  font-size: 13px;
}
.login-btn{
  position: absolute;
  top: -43px;
  width: 50px;
  padding: 3px;
  cursor: pointer;
  border-bottom: 1px solid #e76060;
  border-radius: 30px;
  background-color: #f1f1f1;
}
.msg-box-bottom{
  padding-top: 10px;
}
.msg-send{
  float: right;
  margin: 5px;
}
.msg-send span{
  font-size: 12px;
  padding-right: 20px;
  color: #e76060;
}
.msg-send button{
  position: relative;
  width: 100px;
  height: 30px;
  text-align: center;
  border: none;
  outline: none;
  border-radius: 10px;
  background-color: rgb(231, 96, 96);
  color: white;
}
.msg-send button::after{
  content: '';
  position: absolute;
  top: 20px;
  left: -12px;
  width: 0;
  height: 0;
  z-index: 9;
  border-color: rgb(231, 96, 96) transparent;
  border-width: 0px 0px 10px 20px;
  border-style: solid;
}

/* .msg-box::before,
.msg-box::after {
  content: '';
  display: block;
  position: absolute;
  top: -21px;
  width: 0;
  height: 0;
  border-color: #f1f1f1 transparent;
  border-style: solid;
  z-index: 9;
}
.msg-box::before{
  left: 12px;
  border-width: 0px 10px 20px 0px;
}
.msg-box::after{
  left: 58px;
  border-width: 0px 0px 20px 10px;
} */
</style>
